<template>
  <div class="tankuang">
    <div class="yuan">
      <img src="@/assets/home/jingao.png" alt />
    </div>
    <div class="bj2">
      <img src="@/assets/home/xingxing.png" alt />
    </div>
    <div class="bg">
      <img src="@/assets/home/bj.png" alt />
    </div>
    <div class="p">
      <span class="span1">该账号暂未入驻</span>
      <span class="span2">提交信息入驻后即可进入</span>
      <div class="bottom">
        <div class="qx" @click="quxiaotx">取消</div>
        <div class="qd" @click="quruzhu">立即入驻</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    quxiaotx() {
      this.$emit("quxiaotx");
    },
    quruzhu() {
      this.$emit("quruzhu");
      // this.$router.push("/settlement");
    },
  },
};
</script>

<style lang="scss" scoped>
.tankuang {
  width: 280px;
  height: 250px;
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 265px;
  left: 47.5px;
  .yuan {
    width: 98.5px;
    height: 98.5px;
    position: absolute;
    top: -45px;
    left: 90px;
    display: flex;display: -webkit-flex;
    justify-content: center;
    align-items: center;
    img {
      width: 98.5px;
      height: 98.5px;
    }
  }
  .bj2 {
    width: 200px;
    height: 77px;
    position: absolute;
    top: -15px;
    left: 40px;
    img {
      display: block;
      width: 200px;
      height: 77px;
    }
  }
  .bg {
    width: 280px;
    height: 190px;
    img {
      display: block;
      width: 280px;
      height: 190px;
    }
  }
}
.p {
  display: flex;display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  .span1 {
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222222;
    line-height: 17px;
  }
  .span2 {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #888888;
    line-height: 14px;
    margin-top: 10px;
  }
  .bottom {
    display: flex;display: -webkit-flex;
    align-items: center;
    margin-top: 32.5px;
    .qx {
      width: 110px;
      height: 45px;
      background: #ececec;
      border-radius: 22.5px;
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #555555;
      line-height: 45px;
      text-align: center;
    }
    .qd {
      width: 110px;
      height: 45px;
      background: linear-gradient(0deg, #ffcc06 0%, #ffe818 100%);
      border-radius: 22.5px;
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 45px;
      text-align: center;
      margin-left: 20px;
    }
  }
}
</style>